<template>
  <div class="setting">
    <div class="leftCol">
      <div class="settingsMainHeader">设置</div>
      <ul class="setting-aside">
        <li v-for="(item, index) in settingList" :key="index" :class="{activeColor: activeName === item.name}" @click="handleClick(item)">
          {{item.name}}
        </li>
      </ul>
    </div>
    <div class="contentCol">
      <el-dialog
        title="更改头像"
        :visible.sync="dialogVisible"
        width="30%"
      >
        <el-input
          v-model="newImageUrl"
          placeholder="请输入图片URL"
        ></el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitImageUrl">确 定</el-button>
        </span>
      </el-dialog>

      <component 
        :is="componentSrc" 
        :isEditing="isEditing" 
        @save-changes="saveChanges"
        @show-url-dialog="showUrlDialog"
        ref="infoComponent"
      ></component>
      
      <el-button 
        type="primary" 
        @click="toggleEdit"
        style="margin-top: 20px;"
      >
        {{ isEditing ? '保存' : '修改' }}
      </el-button>
    </div>
  </div>
</template>

<script>
import Info from './Info'
import ChangePassword from './ChangePassword'

export default {
  name: 'setting',
  components: {
    Info,
    ChangePassword
  },
  data () {
    return {
      activeName: '个人信息',
      componentSrc: 'Info',
      isEditing: false,
      dialogVisible: false,
      newImageUrl: '',
      settingList: [{
        icon: '',
        name: '个人信息',
        path: 'Info'
      },
        {
          icon: '',
          name: '修改密码',
          path: 'ChangePassword'
        },
        {
          icon: '',
          name: '学术评价管理',
          path: '/academic-evaluation'
        }]
    }
  },
  mounted () {
    ///document.body.style.backgroundColor="#bdc8d9";
    document.querySelector('body').setAttribute('style', 'background-color:#bdc8d9')
  },
  methods: {
    handleClick (item) {
      if (item.path.startsWith('/')) {
        this.$router.push(item.path)
      } else {
        this.activeName = item.name
        this.componentSrc = item.path
        this.isEditing = false
      }
    },
    toggleEdit() {
      if (this.isEditing) {
        const infoComponent = this.$refs.infoComponent;
        if (infoComponent) {
          infoComponent.saveChanges();
        }
      }
      this.isEditing = !this.isEditing
    },
    saveChanges(data) {
      this.$axios.post('/jobSeeker/update', data)
        .then(res => {
          if (res.code === 200) {
            this.$message.success('保存成功')
            this.isEditing = false
          } else {
            this.$message.error(res.msg || '保存失败')
          }
        })
        .catch(err => {
          console.error('保存失败:', err)
          this.$message.error('保存失败')
        })
    },
    showUrlDialog() {
      this.dialogVisible = true
      this.newImageUrl = ''
    },
    submitImageUrl() {
      if (!this.newImageUrl) {
        this.$message.warning('请输入图片URL')
        return
      }

      if (this.newImageUrl.length > 900) {  // 留一些余量
        this.$message.warning('图片URL太长，请使用短链接')
        return
      }

      const infoComponent = this.$refs.infoComponent
      const userId = infoComponent?.basicData?.id

      console.log('请求参数:', {
        jobSeekerId: userId,
        url: this.newImageUrl
      });

      this.$axios.post("/imageInfo/edit", {
        jobSeekerId: userId,
        url: this.newImageUrl,
        relatedType: 'jobSeekerImage'
      }).then(res => {
        if (res.code == 200) {
          this.$message.success("头像更新成功")
          this.dialogVisible = false
          if (infoComponent && infoComponent.queryUnitImag) {
            infoComponent.queryUnitImag()
          }
        } else {
          this.$message.error(res.msg || "更新失败")
        }
      }).catch(err => {
        console.error('更新头像失败:', err)
        this.$message.error("更新失败")
      })
    },
    handleSelect(key) {
      this.$router.push(key)
    }
  },
  beforeDestroy() {
    document.querySelector('body').removeAttribute('style')
  },
}
</script>

<style lang="scss" scoped>

  @use 'src/assets/stycle-zhou/setting';

  .el-button {
    margin: 20px;
  }

  .el-dialog {
    .el-input {
      margin-bottom: 20px;
    }
  }

</style>
